<template>
	<view class="container">
		<view class="answer" @click="copy(answer)" v-if="answer">{{answer}}</view>
		<view class="think" v-if="thinkShow">
			ai思考中...
		</view>
		<view class="ask">
			<input type="search" placeholder="提问" v-model="input" @confirm="getTalk" />
			<!-- <uni-icons type="search"></uni-icons> -->
			
			<view class="btn" @click="getTalk">
				按钮
			</view>
		</view>
	</view>
</template>

<script>
	import {
		singleTalk,
		multiTalk,
		decodeStream
	} from './talk.js'
	export default {
		data() {
			return {
				answer: '',
				input: '',
				message: [],
				thinkShow: false,
			}
		},
		onShow() {

		},
		methods: {
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function() {}
				});
			},

			// 判断是否需要回答
			think() {
				this.thinkShow = true;
				let message = [{
					"role": "system",
					"content": "请分析当前对话上下文，判断用户是否需要回答。" +
						"如果认为需要回应，输出<allow>；如果认为还需要等待或获取更多信息，输出<pass>。" +
						"考虑以下因素：" +
						"- 提问是否完整" +
						"- 如果句子包含情感需求需要回应的输出<allow>,例如问好、表达情绪" +
						"- 根据用户情感状态（如焦虑、困惑等）适当调整回应。" +
						"请确保不要有多余的输出。"
				}, ]

				// 反转消息数组以从最后开始查找
				let reversedMessages = this.message.slice().reverse();
				let lastIndex = reversedMessages.findIndex(item => item.role === 'assistant');

				let ask = [];
				if (lastIndex !== -1) {
					// 获取最后一个assistant之后的所有元素
					ask = this.message.slice(-(lastIndex + 1)); // 计算原数组的起始索引
				} else {
					ask = this.message.slice(-5); // 如果没有找到，取最后5条消息
				}

				message.push(...ask)
				// message.push(this.input)
				console.log(ask);
				return singleTalk(message).then(res => {
					let answer = res.data.choices[0].message.content
					console.log(answer);
					if (answer.search("pass") != -1) {
						return false;
					} else {
						return true;
					}

				})
			},
			//数据处理
			dispose(answer, message = false) {
				if (answer) {
					this.answer += answer;
				}
				if (message) {
					let ai = {
						"role": "assistant",
						"content": this.answer
					};
					this.message.push(ai);
				}
			},

			async getTalk() {
				this.answer = '';
				let message = {
					role: 'user',
					content: this.input
				};
				this.message.push(message);
				this.input = '';
				// console.log(this.message);
				// 等待think方法的返回结果
				const canAnswer = await this.think();
				
				this.thinkShow = false;
				if (!canAnswer) {
					// console.log("不完整，不回答用户的问题");
					return; // 如果think返回false，则直接返回，不执行multiTalk
				}
				try {
					await multiTalk(this.message).onChunkReceived((e) => {
						if (e.data) {
							decodeStream(e.data, this.dispose)
						}
					});
				} catch (err) {
					console.log(err);
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #1B1A19;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* 子元素间隔 */
		gap: 20px;
		
		height: 100vh;
	}

	.answer {
		/* font-size: 20px; */
		/* font-weight: bold; */
		margin-bottom: 20px;
		margin: 20rpx 0rpx;
		padding: 20rpx;
		background-color: #292827;
		max-width: 80%;
		border-radius: 5px;
		max-height: 300px;
		/* 阴影 */
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
		overflow-y: auto;
	}

	.ask {
		display: flex;
		border-radius: 25px;
		padding: 10px 20px;
		width: 70%;
		background-color: #292827;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
	}

	.ask input {
		flex-grow: 1;
	}
</style>